<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>RowEdit 行编辑器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript" src="../../scripts/boot.js"></script>
    <style type="text/css">
        .New_Button, .Edit_Button, .Delete_Button, .Update_Button, .Cancel_Button {
            font-size: 11px;
            color: #1B3F91;
            font-family: family: Verdana;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <h1>RowEdit 行编辑器</h1>
    <div id="datagrid" class="mini-datagrid" style="width: 700px;height: 300px;" url="../../Employee?method=searchEmployees" idField="id" emptyText="数据为空，<a href='javascript:newRow()'>增加一条</a>" showEmptyText="true">
        <div property="columns">
            <div name="action" width="120" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">#</div>
            <div field="loginname" width="120" headerAlign="center" allowSort="true">员工账号
                <input property="editor" class="mini-textbox" style="width: 100%"/>
            </div>
            <div field="age" width="100" allowSort="true">年龄
                <input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" style="width: 100%"/>
            </div>
            <div field="birthday" width="100" dateFormat="yyyy-MM-dd" allowSort="true">出生日期
                <input property="editor" class="mini-datepicker" style="width: 100%"/>
            </div>
            <div field="gender" width="100" headerAlign="center" align="center" allowSort="true" type="comboboxcolumn">性别
                <input property="editor" class="mini-combobox" style="width: 100%" data="Genders"/>
            </div>
            <div field="country" width="100" headerAlign="center" type="comboboxcolumn">国家
                <input property="editor" class="mini-combobox" style="width: 100%" url="../data/countrys.txt"/>
            </div>
            <div field="married" width="60" headerAlign="center" type="checkboxcolumn" trueValue="1" falseValue="0">婚否</div>
        </div>
    </div>
    <script type="text/javascript">
        mini.parse();
        var grid = mini.get("datagrid");
        grid.load();

        var Genders = [{id:1, text:'男'},{id:2, text:'女'}]
        
        function onActionRenderer(e) {
            var grid = e.sender;
            var record = e.record;
            var uid = record._uid;
            var rowIndex = e.rowIndex;

            var s = '<a class="New_Button" href="javascript:newRow()">New</a>'
                + ' <a class="Edit_Button" href="javascript:editRow(\'' + uid + '\')">Edit</a>'
                + ' <a class="Delete_Button" href="javascript:delRow(\'' + uid + '\')">Delete</a>';

            /*var s = '<a class="New_Button" href="javascript:newRow()">New</a>'
                + ' <a class="Edit_Button" href="javascript:editRow(' + uid + ')">Edit</a>'
                + ' <a class="Delete_Button" href="javascript:delRow(' + uid + ')">Delete</a>';*/

            if (grid.isEditingRow(record)) {
                s = '<a class="Update_Button" href="javascript:updateRow(\'' + uid + '\')">Update</a>'
                    + ' <a class="Cancel_Button" href="javascript:cancelRow(\'' + uid + '\')">Cancel</a>';
                /*s = '<a class="Update_Button" href="javascript:updateRow(' + uid + ')">Update</a>'
                    + ' <a class="Cancel_Button" href="javascript:cancelRow(' + uid + ')">Cancel</a>';*/
            }
            return s;
        }

        function newRow() {
            var row = {};
            grid.addRow(row, 0);
            grid.cancelEdit();
            grid.beginEditRow(row);
        }

        function editRow(row_uid) {
            var row = grid.getRowByUID(row_uid);
            if (row) {
                grid.cancelEdit();
                grid.beginEditRow(row);
            }
        }

        function cancelRow(row_uid) {
            grid.reload();
        }

        function delRow(row_uid) {
            var row = grid.getRowByUID(row_uid);
            if (row) {
                if (confirm("确定删除此记录？")) {
                    grid.loading("删除中，请稍后......");
                    $.ajax({
                        url: "../../Employee?method=deleteEmployeeById&id=" + row.id,
                        success: function (text) {
                            grid.reload();
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert(jqXHR.responseText);
                        }
                    });
                }
            }
        }

        function updateRow(row_uid) {
            var row = grid.getRowByUID(row_uid);
            grid.commitEdit();
            var rowData = grid.getChanges();

            grid.loading("保存中，请稍后");
            var json = mini.encode(rowData);

            $.ajax({
                url: "../../Employee?method=saveEmployees",
                data: {data: json},
                type: "post",
                success: function (text) {
                    grid.reload();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(jqXHR.responseText);
                }
            });
        }

    </script>
</body>

</html>